<template>
  <el-container :direction="vertical">
    <el-header height="56px" class="header">
      <span class="title">| 题库列表</span>
      <span>
        <el-button type="default" size="mini" icon="">刷新</el-button>
      </span>
      <span class="help">
        <i class="el-icon-question
"></i>
        帮助
      </span>
    </el-header>
    <el-container :direction="horizontal" class="list-content">
      <el-main id="search">
        <div>
          <el-select v-model="form">
            <el-option
              label="创建时间"
              value="createdAt"
              checked=""
            ></el-option>
            <el-option label="更新时间" value="updatedAt"></el-option>
          </el-select>
          <span>-</span>
          <el-date-picker
            type="datetime"
            placeholder="选择日期时间"
            v-model="form"
            default-time="12:00:00"
          ></el-date-picker>
          <span>-</span>
          <el-date-picker
            type="datetime"
            placeholder="选择日期时间"
            v-model="form"
            default-time="12:00:00"
          ></el-date-picker>
          <el-button type="primary" size="mini">清除</el-button>
        <el-button class="delate-file" type="default" size="mini">回收站文件</el-button>
        </div>
        <div>
          <el-select
            v-model="search.subject"
            value-key=""
            placeholder="科目"
            clearable
            filterable
          >
            <el-option
              v-for="item in subjects"
              :key="item.value"
              :label="item.subjectname"
              :value="item.subjecttypes"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="search.questiontype"
            value-key=""
            placeholder="题型"
            clearable
            filterable
            class="margin-left-20"
          >
            <el-option
              v-for="item in questionTypes"
              :key="item.value"
              :label="item.testquestionsname"
              :value="item.typesnum"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="search.difficultDegree"
            value-key=""
            placeholder="难易程度"
            clearable
            filterable
          >
            <el-option
              v-for="item in difficultDegree"
              :key="item.value"
              :label="item.stagename"
              :value="item.stagetypes"
            >
            </el-option>
          </el-select>
          <el-button type="primary" size="default">查询</el-button>
        </div>
        <question-table></question-table>
      </el-main>
      <el-container :direction="vertical">
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import QuestionTable from "../../components/question/table.vue"
export default {
  components:{
    QuestionTable
  },
  data() {
    return {
      vertical: "vertical",
      horizontal: "horizontal",
      form: {},
      rules: {},
      subjects:[],// 科目
      questionTypes:[],// 题型
      difficultDegree:[],// 难易程度
      search:{},
    };
  },
  created() {
    // 获取科目
    this.$axios.get("/system/sqSubjecttable/selSubject").then((res) => {
      if(res.data.code === 1) {
        this.subjects = res.data.data;
        console.log(this.subjects);
      }
    });
    this.$axios.get("/system/sqTestquestionstypes/selTestquestions").then(res =>{
      if(res.data.code === 1) {
        this.questionTypes = res.data.data;
      }
    });
    this.$axios.get("/system/sqStagetypes/selstagetypes").then(res => {
      if(res.data.code === 1){
        this.difficultDegree = res.data.data;
      }
    });
  }
};
</script>

<style scoped>
.margin-left-20{
  margin-left:20px;
}
.list-content {
  background-color: #edeef2;
  }
  .header{
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  line-height: 56px;
  }
  .help {
    margin-left: 20px;
    margin-right: 20px;
  }
  .list-content {
    margin: 20px 30px;
    padding: 10px 30px;
    background-color: #fff;
  }
  .delate-file{
    margin-left: 178px;
  }
  .header .el-button{
    position: absolute;
    top: 85px;
    right: 150px;
  }
</style>
